<!DOCTYPE html>
<html lang="en">
<head>
  <title>Shopify App — Installation</title>

  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= render 'shopify_app/partials/layout_styles' %>
  <%= render 'shopify_app/partials/typography_styles' %>
  <%= render 'shopify_app/partials/card_styles' %>
  <%= render 'shopify_app/partials/button_styles' %>
  <%= render 'shopify_app/partials/form_styles' %>
</head>
<body>
  <main class="container" role="main">
    <div class="Polaris-Page Polaris-Page--InstallApp">
      <div class="Polaris-Page__Content">
        <div class="Polaris-Layout">
          <div class="Polaris-Layout__Section">
            <div class="Polaris-Card">
              <div class="Polaris-Card__Header">
                <% application_name = ShopifyApp.configuration.application_name %>
                <h1 class="Polaris-Heading">
                  <%= application_name.presence || 'Shopify App – Installation' %>
                </h1>
              </div>
              <div class="Polaris-Card__Section">
                <%= form_tag login_path do %>
                  <div class="Polaris-Label">
                    <label class="Polaris-Label__Text" for="shop">Enter your shop domain to log in or install this app.</label>
                  </div>
                  <div class="Polaris-TextField <%= 'Polaris-TextField--InlineError' if flash[:error]%>">
                    <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="Polaris-TextField__Input">
                    <div class="Polaris-TextField__Backdrop"></div>
                  </div>
                  <% if flash[:error] %>
                    <div class="Polaris-InlineError"><%= flash[:error] %></div>
                  <% end %>
                  <button type="submit" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
                    <span class="Polaris-Button__Content">Install app</span>
                  </button>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>
</html>
